博客站

一、Vue3 响应式系统的革命性升级

1. Proxy 取代 defineProperty

Vue2 使用 Object.defineProperty 实现响应式，但其存在以下局限性：

• 无法检测动态新增/删除的属性（需手动调用 Vue.set/Vue.delete）。
• 对数组的监听需要特殊处理（如 push、pop 等方法需劫持）。

Vue3 改用 ES6 Proxy，优势包括：

• 支持动态属性监听，无需额外 API。
• 性能优化，减少初始化时的递归遍历。

示例：reactive() 与 ref() 的区别

import { reactive, ref } from 'vue';

// reactive：适用于对象
const state = reactive({ count: 0 });
state.count++; // 自动触发更新

// ref：适用于基本类型（自动包装为 { value: ... }）
const num = ref(0);
num.value++; // 需通过 .value 访问

2. Ref vs Reactive 的选择策略

最佳实践：

• 简单数据用 ref，复杂对象用 reactive。
• 组合逻辑时，优先使用 ref 保持一致性。

二、组合式 API（Composition API）实战解析

1. 为什么需要组合式 API？

Vue2 的 Options API 在复杂组件中会导致：

• 逻辑分散（data、methods、computed 分离）。
• 复用困难（Mixins 易命名冲突）。

组合式 API 通过 setup() 集中管理逻辑：

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;

    onMounted(() => {
      console.log('组件已挂载');
    });

    return { count, increment };
  }
};

2. 核心函数详解

• computed：计算属性（缓存依赖）。
• watch：精确监听特定数据。
• watchEffect：自动追踪依赖，类似 React 的 useEffect。

示例：自定义 Hook 封装数据请求

// useFetch.js
import { ref } from 'vue';

export function useFetch(url) {
  const data = ref(null);
  const loading = ref(true);

  fetch(url)
    .then(res => res.json())
    .then(json => {
      data.value = json;
      loading.value = false;
    });

  return { data, loading };
}

三、Vue3 性能优化策略

1. 编译时优化

• 静态节点提升（Hoisting）：模板中的静态内容会被提取，减少运行时比对。
• Patch Flag 标记：动态节点差异化更新，减少虚拟 DOM 对比成本。

2. 运行时优化

• shallowRef：只监听 .value 变化，忽略内部属性（适用于大型对象）。
• markRaw：标记对象为非响应式，避免不必要的 Proxy 包装。

3. Tree-shaking 支持

Vue3 的模块化设计允许按需引入，减少打包体积：

import { ref, computed } from 'vue'; // 只引入所需 API

四、Vue2 到 Vue3 迁移指南

1. 主要破坏性变更

• v-model 语法调整：
  • Vue2：v-model="value"
  • Vue3：v-model:title="pageTitle"（支持多 v-model）
• 事件总线替代：推荐使用 mitt 或 provide/inject。

2. 官方迁移工具

• @vue/compat：兼容模式逐步升级。
• 迁移检查工具：vue-cli 提供的 vue-upgrade。

五、总结与未来趋势

Vue3 在响应式、组合式 API 和性能上的改进，使其更适合大型应用开发。结合 Vite（极速构建）和 Pinia（状态管理），可进一步提升开发体验。

下一步建议：

1. 小型项目直接升级 Vue3。
2. 大型项目逐步迁移，优先使用组合式 API 重构复杂组件。

通过本文，你应该能全面掌握 Vue3 的核心升级内容，并顺利应用于实际项目！